VR实现实例
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/html"><head> <meta charset="UTF-8"> <title>全景展示</title> <script src="js/three.js"></script> <script src="js/tpanorama.js"></script> <style> body { margin: 0; overflow: hidden; } #panoramaConianer { overflow: hidden; position: absolute; height: 100%; width: 90%; } #tool{ position: absolute; right: 0px; width:10%; height: 100%; background-color: cadetblue; color:white; } </style> <script> var opt,tp; window.onload = function () { opt = { container:'panoramaConianer',//容器 url:'img/p3.png', lables:[ {position:{lon:-72.00,lat:9.00},logoUrl:'',text:'蓝窗户'}, {position:{lon:114.12,lat:69.48},logoUrl:'',text:'一片云彩'}, {position:{lon:132.48,lat:-12.24},logoUrl:'',text:'大海'} ], widthSegments: 60,//水平切段数 heightSegments: 40,//垂直切段数（值小粗糙速度快，值大精细速度慢） pRadius: 1000,//全景球的半径，推荐使用默认值 minFocalLength: 6,//镜头最a小拉近距离 maxFocalLength: 100,//镜头最大拉近距离 showlable: 'show' // show,click } tp = new tpanorama(opt); tp.init(); } function changeImg(name) { opt.lables = []; if (name == "p1"){ opt.lables = [{position:{lon:178.56,lat:-15.84},text:'神像'}] } if (name == "p2"){ opt.lables = [{position:{lon:-80.64,lat:-16.92},text:'蓝色'},{position:{lon:46.80,lat:10.44},text:'绿色'}] } if (name == "p4"){ opt.lables = [{position:{lon:48.96,lat:-20.16},text:'樱花'}] } opt.url = 'img/' name '.png'; tp.clean(); tp.config(opt); tp.init(); } </script></head><body><div id="panoramaConianer"></div><div id="tool"> </br> </br> <button onclick="changeImg('p1')">图1</button> </br> </br> <button onclick="changeImg('p2')">图2</button> </br> </br> <button onclick="changeImg('p4')">图4</button> </br> </br></div></body></html>
评论